<template>
    <mi-list-page>

        <mi-table :list="list" max-height="calc(100vh - 210px)">
            <template #topBar>

                <div class="d_flex flex_jc_sb">
                    <div></div>

                    <mi-search-page :search="search" placeholder="销售单ID/销售单号">
                        <el-form :model="search.info" ref="searchRef" :inline="true" label-width="68px">


<!--                            <el-form-item label="会员" prop="user">-->
<!--                                <mi-input v-model="search.info.user" placeholder="昵称/手机号" />-->
<!--                            </el-form-item>-->

<!--                            <el-form-item label="退款状态" prop="refund_status">-->
<!--                                <mi-select v-model="search.info.refund_status"-->
<!--                                           :options="global.orderOrderRefundStatusOptions"-->
<!--                                />-->
<!--                            </el-form-item>-->
                        </el-form>
                    </mi-search-page>

                </div>

            </template>

            <template #order="{row}">
                <div>{{row.saleOrder?.order_no}}</div>
            </template>


            <template #user="{row}">
                <el-space class="f12" direction="vertical" alignment="start">
                    <div>{{ row.user?.nickname }}</div>
                </el-space>
            </template>

            <template #goods="{row}">

                <el-popover
                    placement="right"
                    :width="'auto'"
                    trigger="click"
                >
                    <template #reference>
                        <el-button link type="primary">查看</el-button>
                    </template>

                    <el-space class="f12" direction="vertical" alignment="start">
                        <el-space v-for="(item, i) in row.items" :key="i">
                            <mi-image shape="square" :src="item.goods_image" :width="32" :height="32" />
                            <div>
                                <div>
                                    {{item.goods_title}}
                                </div>
                                <div v-if="item.goods_sku">
                                    <el-tag size="small">{{item.goods_sku}}</el-tag>
                                </div>
                            </div>
                            <div class="f_secondary">x{{item.num}}</div>
                            <div class="f_danger">￥{{item.refund_price}}</div>
                        </el-space>
                    </el-space>

                </el-popover>
            </template>

            <template #refundType="{row}">
                <span v-if="row.refund_type == 1">仅退款</span>
                <span v-else-if="row.refund_type == 2">退款退货</span>
            </template>

            <template #audit="{row}">
                <el-tag type="warning" v-if="row.audit_status == 0">未审核</el-tag>
                <el-tag type="success" v-else-if="row.audit_status == 1">已通过</el-tag>
                <div v-else-if="row.audit_status == -1">
                    <el-tag type="info">已拒绝</el-tag>
                    <div>{{row.audit_note}}</div>
                </div>
            </template>

            <template #refund="{row}">
                <el-tag type="warning" v-if="row.refund_status == 0">未退款</el-tag>
                <el-tag type="success" v-else-if="row.refund_status == 1">已退款</el-tag>
            </template>

            <template #userDelivery="{row}">
                <div v-if="row.refund_type==2">

                    <div v-if="row.express_order_no">
                        <el-tag type="primary" >已退货</el-tag>
                        <div>快递单号：{{row.express_order_no}}</div>
                    </div>
                    <span v-else>等待用户退货</span>

                </div>

            </template>

            <template #toolbar="{row}">
                <el-space wrap>
                    <el-button link type="primary"
                               v-if="row.audit_status == 0"
                               @click="lineToolbarEvent('audit', row)" v-auth="auth.edit">审核</el-button>
                    <el-button link type="primary"
                               v-if="row.audit_status == 1 && row.refund_type==2 && row.refund_status==0"
                               @click="lineToolbarEvent('refund', row)" v-auth="auth.edit">退款</el-button>
                </el-space>
            </template>

        </mi-table>

    </mi-list-page>


    <order-refund-audit />

</template>

<script setup lang="ts">
// toolbar 事件
import {provide, reactive, ref} from "vue";
import {makeModelAuth} from "@/utils/auth";
import global from "@/dict/global";
import List from "@/model/list";
import Edit from "@/model/edit";
import {FormInstance} from "element-plus";
import Search from "@/model/search";
import OrderRefundAudit from "@/views/store/orderRefundAudit.vue";
import {confirmModal} from "@/utils/alert";
import {simplePost} from "@/utils/request";

const tdWidth = global.tdWidth
const auth = makeModelAuth('store.orderRefund')

const lineToolbarEvent = (event:string, row:any) => {
    switch (event) {
        case 'audit':
            list.currentRow = row
            audit.show = true
            break
        case 'refund':
            confirmModal("确定收到货物了吗？").then(r => {
                simplePost("/store.orderRefund/refund", {
                    id:row.id,
                }).then(r => {
                    setTimeout(() => {
                        list.reload()
                    }, 2000)
                })
            })
            break
    }
}

const list = reactive(new List({
    where:{delete: 'normal'},
    url: `/${auth.index}`,
    columns:[
        {name: "select", type:'selection'},
        {name: "id", title:'ID', width:tdWidth.id},
        {name: "order", title:'销售单号', minWidth: tdWidth.min, type:'slot', slot:'order', tooltip: false},
        {name: "user", title:'用户', minWidth: tdWidth.min, type:'slot', slot:'user'},
        {name: "goods", title:'商品', minWidth: tdWidth.min, type:'slot', slot:'goods', tooltip: false},
        {name:'refund_type', title: '申请类型', type:'slot', slot:'refundType'},
        {name:'refund_price', title: '退款金额'},
        {name: "audit_status", title:'审核状态', type:'slot', slot:'audit'},
        {name: "refund_status", title:'退款状态', type:'slot', slot:'refund'},
        {name: "user_delivery_status", title:'退货状态', type:'slot', slot:'userDelivery'},
        {title: "操作", type:'slot', slot:'toolbar'},
    ]
}))

const audit = reactive(new Edit({}))

const searchRef = ref<FormInstance>()
const search = reactive(new Search({
    list: list,
    searchRef:searchRef.value
}))

const detail = reactive({
    show: false,
})

provide("list", list)
provide("audit", audit)

</script>

<style scoped>
.list_label{
    width: 5em;
    display: inline-block;
    text-align: right;
}
</style>
